<script setup lang="ts">
import { reactive } from 'vue'
import { loadFull } from 'tsparticles'
import type { Engine } from 'tsparticles-engine'

const particlesInit = async (engine: Engine) => {
	await loadFull(engine)
}

const options = reactive({
	// background: {
	// 	color: {
	// 		value: '#000' // 粒子颜色
	// 	}
	// },
	fpsLimit: 60,
	interactivity: {
		events: {
			onClick: {
				enable: true,
				mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。
			},
			onHover: {
				enable: true,
				mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。
			},
			resize: true
		},
		modes: {
			bubble: {
				distance: 400,
				duration: 2,
				opacity: 0.8,
				size: 40
			},
			push: {
				quantity: 4
			},
			repulse: {
				distance: 200,
				duration: 0.4
			}
		}
	},
	particles: {
		color: {
			value: '#ffffff'
		},
		links: {
			color: '#ffffff', // '#dedede'。线条颜色。
			distance: 150, // 线条长度
			enable: true, // 是否有线条
			opacity: 0.5, // 线条透明度。
			width: 1 // 线条宽度。
		},
		collisions: {
			enable: false
		},
		move: {
			direction: 'none',
			enable: true,
			outMode: 'bounce',
			random: false,
			speed: 4, // 粒子运动速度。
			straight: false
		},
		number: {
			density: {
				enable: true,
				area: 800
			},
			value: 80 // 粒子数量。
		},
		opacity: {
			value: 0.5 // 粒子透明度。
		},
		shape: {
			type: 'circle' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
		},
		size: {
			random: true,
			value: 5
		}
	},
	detectRetina: true
})
</script>

<template>
	<div class="center">
		<!-- 标题 -->
		<h2>QFADMIN</h2>
		<!-- 标题 -->

		<!-- 登录选项按钮组 -->
		<el-row :gutter="10">
			<el-col :xs="24" :sm="6">
				<el-button type="primary" size="large" @click="$router.push('/login1')"> 界面1（含微信扫码） </el-button>
			</el-col>
			<el-col :xs="24" :sm="6">
				<el-button type="success" size="large" @click="$router.push('/login2')">界面2（含微信扫码）</el-button>
			</el-col>
			<el-col :xs="24" :sm="6">
				<el-button type="warning" size="large" @click="$router.push('/login3')">界面3（含行为验证码）</el-button>
			</el-col>
			<el-col :xs="24" :sm="6">
				<el-button type="danger" size="large" @click="$router.push('/login4')">界面4（含短信登录）</el-button>
			</el-col>
		</el-row>
		<!-- 登录选项按钮组 -->
	</div>

	<!-- 背景 -->
	<img class="loginBg" src="@/assets/loginBg.jpg" alt="loginBg" />
	<!-- 背景 -->

	<!-- 粒子特效 -->
	<Particles class="abc" id="tsparticles" :particlesInit="particlesInit" :options="options" />
	<!-- 粒子特效 -->
</template>

<style lang="scss" scoped>
@font-face {
	/* 此时的myFont可以其别的名字，应用的时候写此处的名字 */
	font-family: Teko;
	src: url('@/fonts/Teko.ttf');
}
.center {
	width: 780px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	h2 {
		color: #fff;
		font-size: 5.5rem;
		font-family: Teko, sans-serif;
		text-shadow: 8px 8px #000;
		text-transform: uppercase;
		margin: 0;
	}
	.el-col {
		margin-bottom: 10px;
	}
}
.loginBg {
	height: 100vh;
}
</style>
